<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/详情页.css"/>
    <link rel="stylesheet" href="css/fangdajing.css"/>
</head>
<body>
<div id="homepage">
    <div id="header">
        <div class="header-l">
            <div class="header-l-1">
                <img src="img/a1.jpg" alt="" style="margin-top: 8px"/>
            </div>
            <div class="header-l-2">
                <p class="tianmaoshouye"><a href="" class="tianmaoshouye">天猫首页</a></p>
            </div>
            <div class="header-l-3">喵，欢迎来天猫</div>
            <div class="header-l-4">
                <p class="tianmaoshouye"><a href="" class="tianmaoshouye">请登录</a></p>
            </div>
            <div class="header-l-5">
                <p class="tianmaoshouye"><a href="" class="tianmaoshouye">免费注册</a></p>
            </div>
        </div>
        <div class="header-r">
            <ul>
                <li>我的淘宝
                    <span class="shangjiantou">
                        <img src="img/jiantou.jpg" alt=""/>
                    </span>
                    <span class="xiajiantou">
                        <img src="img/jiantou1.jpg" alt=""/>
                    </span>
                    <div class="wodetaobao">
                        <p class="xiaoshou">已买到的宝贝</p>
                        <p class="xiaoshou">已卖出的宝贝</p>
                    </div>
                </li>

                <li style="width: 95px">我关注的品牌
                    <span class="hongxin">
                        <img src="img/a2.jpg" alt=""/>
                    </span>
                </li>
                <li style="width: 80px">购物车0件
                    <span class="gouwuche">
                        <img src="img/a3.jpg" alt=""/>
                    </span>
                </li>
                <li style="width: 60px">收藏夹
                    <span class="shangjiantou">
                        <img src="img/jiantou.jpg" alt=""/>
                    </span>
                    <span class="xiajiantou">
                        <img src="img/jiantou1.jpg" alt=""/>
                    </span>
                    <div class="dianpu">
                        <p class="dianpu-1">收藏的宝贝</p>
                        <p class="dianpu-1">收藏的店铺</p>
                    </div>
                </li>
                <div class="shuxian">|</div>
                <li class="shoujiban">手机版
                    <span class="shouji">
                        <img src="img/a44.jpg" alt=""/>
                    </span>
                    <div class="erweima">
                        <img src="img/b3.jpg" alt=""/>
                    </div>
                </li>
                <li style="width: 45px">淘宝网</li>
                <li style="width: 45px">企业购</li>
                <li class="shangjiazhichi">商家支持
                    <span class="shangjiantou">
                        <img src="img/jiantou.jpg" alt=""/>
                    </span>
                    <span class="xiajiantou">
                        <img src="img/jiantou1.jpg" alt=""/>
                    </span>

                </li>
                <li class="wzdh" style="width: 85px;height: 28px;">网站导航
                    <span class="sdg">
                        <img src="img/a5.jpg" alt=""/>
                    </span>
                    <span class="shangjiantou">
                        <img src="img/jiantou.jpg" alt=""/>
                    </span>
                    <span class="xiajiantou">
                        <img src="img/jiantou1.jpg" alt=""/>
                    </span>
                </li>
            </ul>
        </div>
    </div>

    <div style="clear: both"></div>

    <nav>
        <div id="nav">
            <div class="nav-l">
                <div class="nav-l-img">
                    <img src="img/b1.jpg" alt=""/>
                </div>
                <div class="qijiandian">
                    <div class="qijiandian-l">
                        <h3>唐狮官方旗舰店</h3>
                        <div class="qijiandian-l-l">品牌直销</div>
                        <div class="qijiandian-l-r">
                            <img src="img/wx.jpg" alt=""/>
                        </div>
                    </div>
                    <div class="qijiandian-r">
                        <div class="qijiandian-r-l">
                            <p>描 述 服 务 物 流</p>
                            <div class="hl">
                                <span class="lvse">4.7<img src="img/lvse.jpg"></span>
                                <span class="hongse">4.7 - 4.7-</span>
                            </div>
                        </div>
                        <div class="qijiandian-r-r">
                            <span class="shangjiantou">
                                 <img src="img/xiajiantou1.jpg" alt=""/>
                            </span>
                            <span class="xiajiantou">
                                 <img src="img/jiantou1.jpg" alt=""/>
                            </span>
                        </div>
                    </div>
                    <div class="pingfen">
                        <div class="pingfen-t">
                            <p>店铺动态评分</p>
                            <ul>
                                <li>描述相符：4.7</li>
                                <li>服务态度：4.7</li>
                                <li>物流服务：4.7</li>
                            </ul>
                        </div>
                        <div class="pingfen-c">
                            <p>店铺服务</p>
                            <ul>
                                <li>掌    柜：<a href="">唐狮官方旗舰店</a></li>
                                <li>客    服：<img src="img/wx.jpg" alt="" style="cursor: pointer"/></li>
                                <li>开店时长：
                                    <div class="shichang">
                                        <div class="shichang-l">8</div>
                                        <div class="shichang-r">天猫8年店</div>
                                    </div>
                                </li>
                                <li>所在地：浙江，宁波</li>
                                <li>工商执照：<img src="img/hui.jpg" alt="" style="width: 20px;height: 20px;cursor: pointer"/></li>
                            </ul>
                        </div>
                        <div class="pingfen-d">
                            <div class="btn">
                                <div class="btn-l">
                                    <img src="img/bei.jpg" alt=""/>
                                    <p>进店逛逛</p>
                                </div>
                            </div>
                            <div class="btn1">
                                <div class="btn1-l">
                                    <img src="img/xing.jpg" alt=""/>
                                    <p>收藏本店</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="shoujiguang">
                    <p>手机逛</p>
                    <div class="shoujiguang-q">
                        <div class="shoujiguang-l">
                            <img src="img/ma.jpg" alt=""/>
                        </div>
                        <div class="shoujiguang-r">
                             <span class="shangjiantou">
                                 <img src="img/xiajiantou1.jpg" alt=""/>
                            </span>
                            <span class="xiajiantou">
                                 <img src="img/jiantou1.jpg" alt=""/>
                            </span>
                        </div>
                    </div>
                    <div class="gz"><img src="img/gz.jpg" alt=""/></div>
                </div>
            </div>
            <div class="nav-r">
                <div class="nav-r-t">
                    <input type="text" placeholder="女神衣橱必备"/>
                    <div class="soutianmao">搜天猫</div>
                    <div class="soubendian">搜本店</div>
                </div>
                <div class="nav-r-d">
                    <ul>
                        <li>牛仔裤</li>
                        <li style="margin-left: 5px">|</li>
                        <li style="margin-left: 5px">小脚裤</li>
                        <li style="margin-left: 5px">|</li>
                        <li style="margin-left: 5px">唐狮</li>
                        <li style="margin-left: 5px">|</li>
                        <li style="margin-left: 5px">九分裤</li>
                        <li style="margin-left: 5px">|</li>
                        <li style="margin-left: 5px">打底裤</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <div id="dinner">
        <ul>
            <li>首页</li>
            <li style="width: 10px">|</li>
            <li style="width: 70px">所有产品</li>
            <li style="width: 10px">|</li>
            <li style="width: 72px">全部男装</li>
            <li>羽绒服</li>
            <li style="width: 42px">毛衫</li>
            <li>大衣/外套</li>
            <li style="width: 42px">卫衣</li>
            <li style="width: 42px">衬衫</li>
            <li>休闲裤</li>
            <li>牛仔裤</li>
            <li style="width: 10px">|</li>
            <li style="width: 70px">全部女装</li>
            <li>羽绒服</li>
            <li style="width: 45px">毛衫</li>
            <li style="width: 45px">外套</li>
            <li style="width: 45px">卫衣</li>
            <li style="width: 45px">衬衫</li>
            <li>休闲裤</li>
            <li>牛仔裤</li>
            <li>裙装</li>
        </ul>
    </div>
    <div id="dinner1">
        <div class="dinner1-t">
            <div class="dinner1-t-l"><img src="img/yw.jpg" alt=""/></div>
            <div class="dinner1-t-r">
                <div class="shiyongjuan">
                    <div class="qsz">
                        <div class="q">￥</div>
                        <span class="sz">20</span>
                    </div>
                    <span class="man">满299元使用卷</span>
                </div>
                <div class="shiyongjuan">
                    <div class="qsz">
                        <div class="q">￥</div>
                        <span class="sz">100</span>
                    </div>
                    <span class="man">满299元使用卷</span>
                </div>
            </div>
        </div>
        <div class="dinner1-d">
             <ul>
                 <li style="width: 85px"><img src="img/aa2.jpg" alt="" style="margin-top: 8px;float: left"/>春新品首发</li>
                 <li style="width: 15px">|</li>
                 <li>热销专区</li>
                 <li style="width: 15px">|</li>
                 <li>羽绒专区</li>
                 <li style="width: 15px">|</li>
                 <li>情侣专区</li>
                 <li style="width: 15px">|</li>
                 <li>毛衫专区</li>
                 <li style="width: 15px">|</li>
                 <li>清仓专区</li>
                 <li style="width: 15px">|</li>
                 <li>会员制度</li>
                 <li style="width: 15px">|</li>
                 <li>品牌介绍</li>
                 <li style="width: 15px">|</li>
                 <li>收藏店铺</li>
             </ul>
            <div class="sou">
                <input type="text" placeholder="羽绒服" />
                <div class="sou1">
                    <img src="img/sou.jpg" alt=""/>
                </div>
            </div>
        </div>
    </div>

    <div id="main">
        <div class="main-q">
             <div class="main-l">
                 <div class="main-l-q">
                     <div class="main-l-t">
                         <div class="box" id="fdj">
                             <div class="small">
                                 <img src="images/ts1.jpg" alt="" style="width: 420px;height: 420px;"/>
                                 <div class="mask"></div>
                                 <div class="fdjzp"><img src="img/fangdajing.jpg" alt=""/></div>
                             </div>
                             <div class="big">
                                 <img src="images/ts.jpg" alt=""/>
                             </div>
                         </div>
                     </div>
                     <div class="main-l-c">
                         <ul>
                             <li><img src="img/tsx.jpg" alt=""/></li>
                             <li><img src="img/tsx1.jpg" alt=""/></li>
                         </ul>
                     </div>
                     <div class="main-l-d">
                         <p class="fx"><img src="img/lianjie.jpg" alt=""/>分享</p>
                         <p class="sc"><img src="img/huixing.jpg" alt=""/>收藏商品<span>（18511人气）</span></p>
                         <p class="jb">举报</p>
                     </div>
                 </div>
             </div>
             <div class="main-r">
                 <div class="wenzi">唐狮牛仔裤女小脚裤弹力紧身铅笔裤大码深色加厚女裤学生秋冬长裤</div>
                 <div class="bjt">
                     <div class="bjt-t">
                         <img src="img/tmgwj.jpg" alt="" style="float: left"/>
                         <p>全天猫实物商品通用</p>
                         <div class="ggl">
                             <p class="qgj">去刮奖</p>
                             <img src="img/ggl.jpg" alt="" class="ggl-img"/>
                         </div>
                     </div>
                     <div class="bjt-c1">
                         <p class="jg">价格</p>
                         <p class="jgsz">￥179.00</p>
                     </div>
                     <div class="bjt-c2">
                         <p class="cxj">促销价</p>
                         <div class="cxj1"><span class="qqqq">￥</span><p class="qqq">129.00</p></div>
                         <div class="zgtj">掌柜推荐</div>
                     </div>
                     <div class="bjt-d">
                         <p class="bdhd">本店活动</p>
                         <p class="by">满2件，包邮</p>
                         <div class="gdyx">
                             <p class="gdyx1">更多优惠</p>
                             <img src="img/gdy.jpg" alt=""class="gdy-img"/>
                         </div>
                     </div>
                 </div>
                 <div class="kd">
                     <div class="kdyf">
                         <p class="yf">运费</p>
                         <p class="cs">浙江宁波 至</p>
                         <div class="bjc">
                             <p class="bjc1">北京</p>
                             <img src="img/bjjt.jpg" alt="" class="bjjt"/>
                         </div>
                         <p class="kdfy">快递：0.00</p>
                     </div>
                 </div>
                 <div class="xlpl">
                     <ul>
                         <li style="border-left: none">月销量<span class="yxl">114</span></li>
                         <li>累计评价<span class="ljpj">6794</span></li>
                         <li>送天猫积分<span class="tmjf">64</span></li>
                     </ul>
                 </div>
                 <div class="gm">
                     <div class="cc">
                         <p class="cc1">尺寸</p>
                         <div class="size">
                             <ul>
                                 <li>25</li>
                                 <li>29</li>
                                 <li>30</li>
                                 <li>31</li>
                             </ul>
                         </div>
                     </div>
                     <div class="xyfl">
                         <p class="xyfl1">颜色分类</p>
                         <img src="img/tsx1.jpg" alt="" class="ysfl"/>
                     </div>
                     <div class="sl">
                         <p class="sl1">数量</p>
                         <span class="input" contenteditable="true">1</span>
                         <div class="sxjt">
                             <div class="sxjt-t">
                                 <img src="img/sxjt-t.jpg" alt="" class="sxjt-img"/>
                             </div>
                             <div class="sxjt-d">
                                 <img src="img/sxjt-d.jpg" alt=""class="sxjt-img1"/>
                             </div>
                         </div>
                         <p class="jjj">件</p>
                         <p class="kc">库存84件</p>
                     </div>
                     <div class="anniu">
                         <div class="anniu1">立即购买</div>
                         <div class="anniu2">
                             <div class="jrche">
                                 <img src="img/che.jpg" alt="" class="che"/>
                                 <p class="jr">加入购物车</p>
                             </div>
                         </div>
                     </div>
                     <div class="zf">
                         <p class="fwcn">服务承诺</p>
                         <p class="zp">正品保证</p>
                         <div class="T222">
                             <img src="img/T222.jpg" alt="" class="T222-img"/>
                             <p class="tk">极速退款</p>
                         </div>
                         <p class="wly">七天无理由退换</p>
                         <div class="zffs">
                             <p class="zffs1">支付方式</p>
                             <img src="img/bjjt.jpg" alt="" class="zffs-img"/>
                         </div>
                     </div>
                 </div>

             </div>
        </div>
        <div class="main-q1">

        </div>
    </div>


    <div id="box">
        <div id="tit">
            <span class="select">春冬优惠购</span>
            <span>模特搭配</span>
            <span>唐狮推荐</span>
            <span>活力搭配</span>
            <span>秋冬组合</span>
        </div>
        <div id="con">
            <ul>
                <li class="blo">
                    <div class="blo-l">
                        <div class="blo-l-l">
                            <img src="img/tsx3.jpg" alt="" style="display: inline-block;width: 145px;height: 145px;margin-left: 10px"/>
                            <input type="checkbox" checked="checked"style="width: 20px;height: 20px;margin-left: 10px" />
                            <p class="mrxzjg">价格 ￥179.00</p>
                        </div>
                        <div class="blo-l-r">
                            <img src="img/tsx6.jpg" alt="" style="display: inline-block;width: 145px;height: 145px;margin-left: 10px"/>
                            <input type="checkbox" style="width: 20px;height: 20px;margin-left: 10px" />
                            <p class="mrxzjg">价格 ￥359.00</p>
                        </div>
                    </div>
                    <div class="blo-r">
                        <div class="tcj">
                            <p class="tcj1">套餐价：</p>
                            <p class="tcj2">￥159.00</p>
                            <p class="tcj3">省￥50.00</p>
                        </div>
                        <p class="tcj-1">价格 ￥179.00</p>
                        <div class="but">立即购买</div>
                        <div class="but1">加入购物车</div>
                    </div>
                </li>
                <li>
                    <div class="blo-l">
                        <div class="blo-l-l">
                            <img src="img/tsx4.jpg" alt="" style="display: inline-block;width: 145px;height: 145px;margin-left: 10px"/>
                            <input type="checkbox" checked="checked"style="width: 20px;height: 20px;margin-left: 10px" />
                            <p class="mrxzjg">价格 ￥179.00</p>
                        </div>
                        <div class="blo-l-r">
                            <img src="img/tsx3.jpg" alt="" style="display: inline-block;width: 145px;height: 145px;margin-left: 10px"/>
                            <input type="checkbox" style="width: 20px;height: 20px;margin-left: 10px" />
                            <p class="mrxzjg">价格 ￥759.00</p>
                        </div>
                    </div>
                    <div class="blo-r">
                        <div class="tcj">
                            <p class="tcj1">套餐价：</p>
                            <p class="tcj2">￥189.00</p>
                            <p class="tcj3">省￥50.00</p>
                        </div>
                        <p class="tcj-1">价格 ￥179.00</p>
                        <div class="but">立即购买</div>
                        <div class="but1">加入购物车</div>
                    </div>

                </li>
                <li>
                    <div class="blo-l">
                        <div class="blo-l-l">
                            <img src="img/tsx3.jpg" alt="" style="display: inline-block;width: 145px;height: 145px;margin-left: 10px"/>
                            <input type="checkbox" checked="checked"style="width: 20px;height: 20px;margin-left: 10px" />
                            <p class="mrxzjg">价格 ￥179.00</p>
                        </div>
                        <div class="blo-l-r">
                            <img src="img/tsx5.jpg" alt="" style="display: inline-block;width: 145px;height: 145px;margin-left: 10px"/>
                            <input type="checkbox" style="width: 20px;height: 20px;margin-left: 10px" />
                            <p class="mrxzjg">价格 ￥649.00</p>
                        </div>
                    </div>
                    <div class="blo-r">
                        <div class="tcj">
                            <p class="tcj1">套餐价：</p>
                            <p class="tcj2">￥149.00</p>
                            <p class="tcj3">省￥50.00</p>
                        </div>
                        <p class="tcj-1">价格 ￥179.00</p>
                        <div class="but">立即购买</div>
                        <div class="but1">加入购物车</div>
                    </div>
                </li>
                <li>
                    <div class="blo-l">
                        <div class="blo-l-l">
                            <img src="img/tsx5.jpg" alt="" style="display: inline-block;width: 145px;height: 145px;margin-left: 10px"/>
                            <input type="checkbox" checked="checked"style="width: 20px;height: 20px;margin-left: 10px" />
                            <p class="mrxzjg">价格 ￥179.00</p>
                        </div>
                        <div class="blo-l-r">
                            <img src="img/tsx6.jpg" alt="" style="display: inline-block;width: 145px;height: 145px;margin-left: 10px"/>
                            <input type="checkbox" style="width: 20px;height: 20px;margin-left: 10px" />
                            <p class="mrxzjg">价格 ￥258.00</p>
                        </div>
                    </div>
                    <div class="blo-r">
                        <div class="tcj">
                            <p class="tcj1">套餐价：</p>
                            <p class="tcj2">￥129.00</p>
                            <p class="tcj3">省￥50.00</p>
                        </div>
                        <p class="tcj-1">价格 ￥109.00</p>
                        <div class="but">立即购买</div>
                        <div class="but1">加入购物车</div>
                    </div>
                </li>
                <li>
                    <div class="blo-l">
                        <div class="blo-l-l">
                            <img src="img/tsx3.jpg" alt="" style="display: inline-block;width: 145px;height: 145px;margin-left: 10px"/>
                            <input type="checkbox" checked="checked"style="width: 20px;height: 20px;margin-left: 10px" />
                            <p class="mrxzjg">价格 ￥179.00</p>
                        </div>
                        <div class="blo-l-r">
                            <img src="img/tsx4.jpg" alt="" style="display: inline-block;width: 145px;height: 145px;margin-left: 10px"/>
                            <input type="checkbox" style="width: 20px;height: 20px;margin-left: 10px" />
                            <p class="mrxzjg">价格 ￥999.00</p>
                        </div>
                    </div>
                    <div class="blo-r">
                        <div class="tcj">
                            <p class="tcj1">套餐价：</p>
                            <p class="tcj2">￥199.00</p>
                            <p class="tcj3">省￥50.00</p>
                        </div>
                        <p class="tcj-1">价格 ￥179.00</p>
                        <div class="but">立即购买</div>
                        <div class="but1">加入购物车</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>


<script type="text/javascript" src="js/my.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    window.onload = function() {
        var fdj = document.getElementById("fdj") // 获取最大 的盒子
        var small  = fdj.children[0];   //  small 盒子
        console.log(small)
        var big = fdj.children[1];
        var mask = small.children[1];   // 黄色盒子
        small.onmouseover = function() {

            mask.style.display = "block";
            big.style.display = "block";
        }
        small.onmouseout = function() {

            mask.style.display = "none";
            big.style.display = "none";
        }
        // alert(small.parentNode.offsetLeft)
        // 第二步开始  要得到鼠标在 small 内的坐标
        small.onmousemove  = function(event) {
            var event = event || window.event;  // 事件对象
            var pagex = event.pageX || event.clientX + scroll().left;  // 兼容pagex
            var pagey = event.pageY || event.clientY + scroll().top;
            var x = pagex - small.parentNode.offsetLeft-mask.offsetWidth / 2;
            // 第二个雷， 得到是 box 距离左边的距离
            // 鼠标在small 内的坐标     用pagex 减去 box.offsetLeft 就可以了
            var y = pagey - small.parentNode.offsetTop - mask.offsetHeight /2;
            // console.log(x+ " "+ y);
            if(x<0) {
                x = 0;
            } else if(x>small.offsetWidth - mask.offsetWidth) {
                x = small.offsetWidth - mask.offsetWidth;
            }
            if(y<0) {
                y = 0;
            } else if(y > small.offsetHeight - mask.offsetHeight) {
                y = small.offsetHeight - mask.offsetHeight;
            }

            mask.style.left = x + "px";
            mask.style.top = y + "px";
            var bigImg = big.children[0];
            // var xx = (bigImg.offsetWidth - small.offsetWidth) / (small.offsetWidth - mask.offsetWidth)
            console.log(xx);
            // var xxx = 800 / 350;  最简单，但是不精确
            // 他们的比例公式
            var xx = (bigImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth)
            bigImg.style.marginLeft = -x * xx + "px";
            bigImg.style.marginTop = -y * xx + "px";
        }

    }

    $(function(){
        $("#tit span").click(function(){
            var index=$(this).index();
//            $(this).className="select";
            $("#con li").eq(index).css({"display":"block"});
            $("#con li").eq(index).siblings().css({"display":"none"});
        })
    })

    $(function(){
        $("#tit span").click(function(){
            $(this).css({"border-top":"2px solid red"});
            $(this).css({"color":"red"});
            $(this).siblings().css({"border-top":"none"});
            $(this).siblings().css({"color":"black"});
        })
    })

    $(function(){
        var num=$(".input").html();
        $(".sxjt-t").click(function(){
                num=parseInt(num)+1;
                $(".input").html(num);
            if(num>=84){
                num=84;
                $(".input").html(num);
            }
        })
        $(".sxjt-d").click(function(){
            num=parseInt(num)-1;
            $(".input").html(num);
            if(num<=0){
                num=1;
                $(".input").html(num);
            }
        })
    })


</script>
</body>
</html>